<div class="section gf-form-group">
    <h5 class="section-heading">
      Tooltips
      <info-popover mode="right-normal">
        <span
          ng-bind-html="$GF.popover('Add/change tooltip/popup with aggregated values in shapes defined in color mapping', 'TOOLTIPS')">
        </span>
      </info-popover>
    </h5>
    <gf-form-switch class="gf-form" label-class="width-10" tooltip="Add tooltips metrics and graphs on shapes"
      label="Display metrics" checked="rule.data.tooltip" on-change="editor.onRulesChange()">
    </gf-form-switch>
    <div class="gf-form" ng-if="rule.data.tooltip">
      <label class="gf-form-label width-10">Label
        <info-popover mode="right-normal"><span
            ng-bind-html="$GF.popover('Label of metric in popup', 'TOOLTIPS')"></span>
        </info-popover>
      </label>
      <input type="text" class="gf-form-input width-12" ng-model="rule.data.tooltipLabel"
        ng-blur="editor.onRulesChange()" placeholder="auto" />
    </div>
    <div class="gf-form" ng-if="rule.data.tooltip">
      <label class="gf-form-label width-10">When state is
        <info-popover mode="right-normal">
          <span ng-bind-html="$GF.popover('Define condition to add values in tooltip', 'TOOLTIPS')"> </span>
        </info-popover>
      </label>
      <div class="gf-form-select-wrapper width-12">
        <select class="gf-form-input" ng-model="rule.data.tooltipOn"
          ng-options="c.value as c.text for c in editor.tooltipOn" ng-change="editor.onRulesChange()"></select>
      </div>
    </div>
    <div class="gf-form" ng-if="rule.data.tooltip">
      <label class="gf-form-label width-10">Direction
        <info-popover mode="right-normal">
          <span ng-bind-html="$GF.popover('Define the sens of display', 'TOOLTIPS', 'tooltip_direction_ani')">
          </span>
        </info-popover>
      </label>
      <div class="gf-form-select-wrapper width-12">
        <select class="gf-form-input" ng-model="rule.data.tpDirection"
          ng-options="c.value as c.text for c in editor.tpDirection" ng-change="editor.onRulesChange()"></select>
      </div>
    </div>
    <gf-form-switch label="Color with state" class="gf-form" label-class="width-10"
      tooltip="Color values in tooltip with state/thresholds colors" checked="rule.data.tooltipColors"
      ng-if="rule.data.tooltip">
    </gf-form-switch>
  </div>